<template>
  <div>
    <el-card style="z-index: -1; width: 95%; margin-left: 1%; margin-top: 1%">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="全部任务" name="allTasks" @tab-click="allTasks">
          <el-row type="flex" class="btn-group">
            <el-col :span="12">

              <el-button @click="evolution">执行任务</el-button>
              <el-button @click="adjust">调整任务</el-button>
              <el-button>导出</el-button>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <!-- Search -->
              <el-input v-model="condition1" placeholder="请输入计划编号或名称" @keyup.enter.native="searchall()"
                style="width: 300px">
                <el-button slot="append" icon="el-icon-search" @click="searchall1()"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <el-table :data="tableData1.records" style="width: 100%" border @selection-change="AllSelectionChange"
            ref="table" @row-click="singleElection" highlight-current-row>
            <el-table-column prop="index" label="序号" width="50" fixed align="center">
              <template slot-scope="scope">
                {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="action" label="操作" width="100" fixed align="center"> <template slot-scope="scope">
                <el-button type="text" @click="handleView(scope.row)">查看</el-button>
              </template></el-table-column>
            <el-table-column prop="pmcsInspectiontasktypeId" label="状态" width="100" align="center"></el-table-column>
            <el-table-column label="任务编号" prop="taskCoding" width="180" align="center"></el-table-column>
            <el-table-column label="任务名称" prop="pmcsName" width="180" align="center"></el-table-column>
            <el-table-column label="计划名称" prop="deviceSpotcheck.spotcheckName" width="180"
              align="center"></el-table-column>
            <el-table-column label="任务计划序号" prop="pmcsNumber" width="180" align="center"></el-table-column>
            <el-table-column label="任务计划开始时间" prop="pmcsOkontime" width="180" align="center"></el-table-column>
            <el-table-column label="任务计划结束时间" prop="pmcsOkuntime" width="180" align="center"></el-table-column>
            <el-table-column label="实际开始时间" prop="pmcsOkontime" width="180" align="center"></el-table-column>
            <el-table-column label="实际结束时间" prop="pmcsOkuntime" width="180" align="center"></el-table-column>
            <el-table-column label="点检用时" prop="pmcsTime" width="180" align="center"></el-table-column>
            <el-table-column label="点检班组" prop="deviceSpotcheck.spotcheckClassId" width="180"
              align="center"></el-table-column>
            <el-table-column label="设备名称" prop="equipment.name" width="180" align="center"></el-table-column>
            <el-table-column label="设备编号" prop="code2" width="180" align="center"></el-table-column>
            <el-table-column label="设备类型" prop="equipment.deviceType" width="180" align="center"></el-table-column>
            <el-table-column label="规格型号" prop="equipment.specifications" width="180" align="center"></el-table-column>
            <el-table-column label="使用部门" prop="equipment.useDepartments" width="180" align="center"></el-table-column>
            <el-table-column label="存放位置" prop="equipment.storageLocation" width="180" align="center"></el-table-column>
            <el-table-column label="应检设备" prop="pmcsInspection" width="180" align="center"></el-table-column>
            <el-table-column label="未检设备数" prop="pmcsNd" width="180" align="center"></el-table-column>
            <el-table-column label="异常设备数" prop="anomalousItems" width="180" align="center"></el-table-column>
          </el-table>
          <div style="text-align: right; margin-top: 20px"> <el-pagination background
              layout="prev, pager, next, sizes, total" :total="this.tableData1.total" :page-size="this.tableData1.size"
              :sizes="this.tableData1.size" :page-sizes="[10, 20, 30, 40, 50]" @size-change="AllSizeChange"
              :current-page="this.tableData1.current" @current-change="AllCurrentChange">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的任务" name="myTasks" @tab-click="myTasks">
          <el-row type="flex" class="btn-group">
            <el-col :span="12">

              <el-button @click="evolution">执行任务</el-button>
              <el-button @click="adjust">调整任务</el-button>
              <el-button>导出</el-button>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <!-- Search -->
              <el-input v-model="condition" placeholder="请输入计划编号或名称" @keyup.enter.native="searchall()"
                style="width: 300px">
                <el-button slot="append" icon="el-icon-search" @click="searchall()"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <el-table :data="tableData.records" style="width: 100%" border @selection-change="MineSelectionChange"
            ref="table" @row-click="singleElection" highlight-current-row>
            <el-table-column prop="index" label="序号" width="50" fixed align="center">
              <template slot-scope="scope">
                {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="action" label="操作" width="100" fixed align="center"> <template slot-scope="scope">
                <el-button type="text" @click="handleView(scope.row)">查看</el-button>
              </template></el-table-column>
            <el-table-column prop="pmcsInspectiontasktypeId" label="状态" width="100" align="center"></el-table-column>
            <el-table-column label="任务编号" prop="taskCoding" width="180" align="center"></el-table-column>
            <el-table-column label="任务名称" prop="pmcsName" width="180" align="center"></el-table-column>
            <el-table-column label="计划名称" prop="deviceSpotcheck.spotcheckName" width="180"
              align="center"></el-table-column>
            <el-table-column label="任务计划序号" prop="pmcsNumber" width="180" align="center"></el-table-column>
            <el-table-column label="任务计划开始时间" prop="pmcsOkontime" width="180" align="center"></el-table-column>
            <el-table-column label="任务计划结束时间" prop="pmcsOkuntime" width="180" align="center"></el-table-column>
            <el-table-column label="实际开始时间" prop="pmcsOkontime" width="180" align="center"></el-table-column>
            <el-table-column label="实际结束时间" prop="pmcsOkuntime" width="180" align="center"></el-table-column>
            <el-table-column label="点检用时" prop="pmcsTime" width="180" align="center"></el-table-column>
            <el-table-column label="点检班组" prop="deviceSpotcheck.spotcheckClassId" width="180"
              align="center"></el-table-column>
            <el-table-column label="设备名称" prop="equipment.name" width="180" align="center"></el-table-column>
            <el-table-column label="设备编号" prop="code2" width="180" align="center"></el-table-column>
            <el-table-column label="设备类型" prop="equipment.deviceType" width="180" align="center"></el-table-column>
            <el-table-column label="规格型号" prop="equipment.specifications" width="180" align="center"></el-table-column>
            <el-table-column label="使用部门" prop="equipment.useDepartments" width="180" align="center"></el-table-column>
            <el-table-column label="存放位置" prop="equipment.storageLocation" width="180" align="center"></el-table-column>
            <el-table-column label="应检设备" prop="pmcsInspection" width="180" align="center"></el-table-column>
            <el-table-column label="未检设备数" prop="pmcsNd" width="180" align="center"></el-table-column>
            <el-table-column label="异常设备数" prop="anomalousItems" width="180" align="center"></el-table-column>
          </el-table>
          <div style="text-align: right; margin-top: 20px"> <el-pagination background
              layout="prev, pager, next, sizes, total" :total="this.tableData.total" :page-size="this.tableData.size"
              :sizes="this.tableData.size" :page-sizes="[10, 20, 30, 40, 50]" @size-change="MineSizeChange"
              :current-page="this.tableData.current" @current-change="MineCurrentChange">
            </el-pagination>
          </div>

         
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog v-model="dialogVisible" :visible.sync="dialogVisible" style="width: 150%; margin-left: -25%">
            <span>任务调整</span>
            <el-divider></el-divider>

            <el-form label-width="150px">
              <el-row :gutter="20">
                <el-col span="12">
                  <el-form-item label="任务编号">
                    <el-input style="width: 400px" disabled v-model="task.taskCoding"></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="任务名称">
                    <el-input style="width: 400px" disabled v-model="task.pmcsName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col span="12">
                  <el-form-item label="计划名称">
                    <el-input style="width: 400px" disabled v-model="task.pmcsName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="计划任务序号">
                    <el-input style="width: 400px" disabled v-model="task.pmcsNumber"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col span="12">
                  <el-form-item label="任务计划开始时间">
                    <el-input style="width: 400px" disabled v-model="task.pmcsOkontime"></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="任务计划结束时间">
                    <el-input style="width: 400px" disabled v-model="task.pmcsOkuntime"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col span="12">
                  <el-form-item label="点检班组">
                    <el-input style="width: 400px" disabled v-model="classId"></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="点检人">
                    <el-input style="width: 400px" disabled v-model="person"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col span="12">
                  <el-form-item label="*调整类型">
                    <el-select v-model="value" placeholder="Select" size="large" style="width: 240px" @change="change">
                      <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-span v-if="value == '调整本次任务时间'">
                <el-row :gutter="20">
                  <el-col span="12">
                    <el-form-item label="*开始时间">
                      <el-date-picker v-model="value1" style="width: 400px" type="date" placeholder="请选择日期"
                        :size="size">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col span="12">
                    <el-form-item label="*结束时间">
                      <el-date-picker v-model="value2" style="width: 400px" type="date" placeholder="请选择日期"
                        :size="size">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col span="12">
                    <el-form-item label="*调整原因">
                      <el-input type="textarea" :rows="4" style="width: 950px" placeholder="请输入"
                        v-model="task2.cause"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-span>
              <el-span v-if="value == '跳过本次点检任务'">
                <el-row :gutter="20">
                  <el-col span="12">
                    <el-form-item label="*调整原因">
                      <el-input type="textarea" :rows="4" style="width: 800px" v-model="task2.cause"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-span>
              <el-span v-if="value == '修改本次点检任务执行人'">
                <el-row>
                  <el-col span="12">
                    <el-form-item label="更改班组">
                      <el-input v-model="task2.inspectiontaskClass" style="max-width: 600px" @focus="group = true">
                        <el-button slot="append" icon="el-icon-search" @click="group = true"></el-button>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col span="12">
                    <el-form-item label="点检人">
                      <el-input v-model="task2.inspectiontaskPerson" style="max-width: 600px" placeholder="请输入"
                        @focus="clerk = true">
                        <el-button slot="append" icon="el-icon-search" @click="clerk = true"></el-button>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col span="12">
                    <el-form-item label="*调整原因">
                      <el-input type="textarea" :rows="4" style="width: 800px" v-model="task2.cause"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-span>
              <el-divider></el-divider>
              <div style="text-align: right">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirm">确认</el-button>
              </div>
            </el-form>
          </el-dialog>

          <!-- 选择班组 -->
          <el-dialog v-model="group" :visible.sync="group" style="width: 80%; margin-left: 20%">
            <span>选择班组</span>
            <el-divider></el-divider>

            <el-form @submit.native.enter.prevent>
              <el-form-item>
                <el-input placeholder="请输入" v-model="condition" @keyup.enter.native="classSearch()">
                  <i slot="suffix" class="el-icon-search"></i>
                </el-input>
              </el-form-item>
            </el-form>

            <el-table :data="classList.records" border stripe ref="tableRef1" @row-click="singleElection"
              highlight-current-row>
              <el-table-column label="序号" width="65" prop="classId" align="center">
              </el-table-column>
              <el-table-column label="班组名称" prop="className" align="center"></el-table-column>
              <el-table-column label="班组人数" align="center" prop="count"></el-table-column>
            </el-table>
            <div style="text-align: right">
              <el-pagination background layout="prev, pager, next, jumper,total" :total="this.classList.total"
                :page-size="this.classList.size" @current-change="handleCurrentChange" @size-change="handleSizeChange"
                :page-sizes="[10, 20, 30, 40, 50]">
              </el-pagination>
            </div>
            <el-divider></el-divider>
            <div style="text-align: right">
              <el-button @click="group = false">取消</el-button>
              <el-button type="primary" @click="classSubmit">确认</el-button>
            </div>
          </el-dialog>

          <!-- 点检人 -->
          <el-dialog v-model="clerk" :visible.sync="clerk" style="width: 80%; margin-left: 20%">
            <span>{{ this.task.inspectiontaskClass }}_选择人员</span>
            <el-divider></el-divider>

            <el-form>
              <el-form-item>
                <el-input placeholder="请输入">
                  <i slot="suffix" class="el-icon-search"></i>
                </el-input>
              </el-form-item>
            </el-form>
            <el-table ref="tableRef2" :data="userList" highlight-current-row @row-click="singleElection" border>
              <el-table-column label="序号">
                <template slot-scope="scope">
                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="用户名" prop="userName"></el-table-column>
              <el-table-column label="姓名" prop="nickName"></el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getList" />
            <el-divider></el-divider>
            <div style="text-align: right">
              <el-button @click="clerk = false">取消</el-button>
              <el-button type="primary" @click="clerkSubmit">确认</el-button>
            </div>
          </el-dialog>
  </div>
</template>

<script>
import { adjustTask } from '@/api/eastjet-maintenance/spotcheck/spotcheckTask';
import router from '../../router';
import { getTask } from '@/api/eastjet-maintenance/spotcheck/spotcheckTask';
import { listUser } from "@/api/system/user";
import { classList } from "@/api/inspection/inspectionPlan";

export default {
  data() {
    return {
      dialogVisible: false,
      activeTab: "allTasks",
      value: '调整本次任务时间',
      tableData: [],
      tableData1: [],
      currentPage: 1,
      pageSize: 2,
      currentPage2: 1,
      pageSize2: 2,
      currentPage1: 1,
      pageSize1: 10,
      condition: "",
      condition1: "",
      classId:"",
      person:"",
      mulitiSelect: [],
      mulitiSelect1: [],
      task: {},
      task2: {
        code: "",
        inspectiontaskOkontime: "",
        inspectiontaskOkuntime: "",
        cause: "",
        inspectiontaskClass: "",
        inspectiontaskPerson: "",
        spotcheckCode: "",
        state: ""
      },
      classList: [],
      userList: [],
      group: false,
      clerk: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      templateSelection: "",
      UpdateTime: "",
      value1: "",
      value2: "",
      type: [
        { value: 1, label: "调整本次任务时间" },
        { value: 2, label: "跳过本次点检任务" },
        { value: 3, label: "修改本次点检任务执行人" },
      ],
    };
  }, mounted() {
    this.init();
    this.user();
    this.groupSearch();
    this.myTasks();

  }, methods: {
    init(val) {
      getTask(this.currentPage, this.pageSize, val,"").then((res) => {
        this.tableData = res.data;
        console.log(this.tableData);
      }).catch((err) => { console.log(err) })
    },
    myTasks(val) {
      getTask(this.currentPage2, this.pageSize2, val,this.$store.state.user.name ).then((res) => {
        this.tableData1 = res.data;
        console.log(this.tableData);
      }).catch((err) => { console.log(err) })
    },
    user() {
      listUser(this.queryParams).then(response => {
        this.userList = response.rows;
        this.total = response.total;
        console.log(response.rows);
      }
      );
    },
    groupSearch() {
      classList(this.currentPage1, this.pageSize1, this.condition)
        .then((res) => {
          console.log(res.data);
          this.classList = res.data;
        })
        .catch((res) => { });
    }, classSubmit() {
      this.group = false;
      this.task2.inspectiontaskClass = this.templateSelection.className;
      console.log(this.templateSelection);
    },
    clerkSubmit() {
      console.log(this.templateSelection);
      this.clerk = false;
      this.task2.inspectiontaskPerson = this.templateSelection.userName;
    }, handleCurrentChange(val) {
      this.currentPage1 = val;

    },

    handleSizeChange(size) {
      this.pageSize1 = size;

    },
    MineSelectionChange(val) {
      this.mulitiSelect = val;

    },
    MineCurrentChange(val) {
      this.currentPage = val;
      this.init();
    },
    MineSizeChange(size) {
      this.pageSize = size;
      console.log(size);
      this.init();
    },
    AllSelectionChange(val) {
      this.mulitiSelect1 = val;

    },
    AllCurrentChange(val) {
      this.currentPage2 = val;
      this.myTasks();
    },
    AllSizeChange(size) {
      this.pageSize2 = size;
      console.log(size);
      this.myTasks();
    },
    searchall() {
      this.init(this.condition);
    },searchall() {
      this.init(this.condition1);
    },
    singleElection(index) {
      console.log(index);
      this.templateSelection = index;
      this.classId = index.deviceSpotcheck.spotcheckClassId; 
      this.person = index.deviceSpotcheck.spotcheckPerson;
      console.log(this.templateSelection);
    },
    evolution() {
      this.$router.push({ path: "/xun/dian/scTaskAction", query: this.templateSelection });
    },
    adjust() {
      this.dialogVisible = true;
      this.task = this.templateSelection;
      console.log(this.task);
    },
    handleView(row) {
      console.log(row);
      router.push({ path: "/xun/dian/scTaskSe", query: row });
    }, confirm() {

      console.log(this.task2);
      if (this.value1 == "" && this.value == "调整本次任务时间") {
        this.$message.error("请选择开始时间");
      } else if (this.value2 == "" && this.value == "调整本次任务时间") {
        this.$message.error("请选择结束时间");
      } else if (this.task2.cause == "" && this.value == "跳过本次点检任务" || this.task2.cause == "" && this.value == "调整本次任务时间" || this.task2.cause == "" && this.value == "修改本次点检任务执行人") {
        this.$message.error("请输入调整原因");
      } else if (this.task2.inspectiontaskClass == "" && this.value == "修改本次点检任务执行人") {
        this.$message.error("请选择班组");
      } else if (this.task2.inspectiontaskPerson == "" && this.value == "修改本次点检任务执行人") {
        this.$message.error("请选择点检人");
      } else {
        if (this.value == "跳过本次点检任务") {
          this.task2.state = "已完成";
          this.task2.code = this.task.taskCoding;
          this.task2.inspectiontaskClass = this.classId;
          this.task2.inspectiontaskPerson = this.person;
          this.task2.inspectiontaskOkontime = this.task.inspectiontaskOkontime;
          this.task2.inspectiontaskOkuntime = this.task.inspectiontaskOkuntime;
        } else if (this.value == "调整本次任务时间") {
          this.task2.state = this.task.pmcsInspectiontasktypeId;
          this.task2.inspectiontaskClass = this.classId;
          this.task2.inspectiontaskPerson = this.person;
          this.task2.code = this.task.taskCoding;
        } else if (this.value == "修改本次点检任务执行人") {
          this.task2.state = this.task.pmcsInspectiontasktypeId;
          this.task2.inspectiontaskOkontime = this.task.inspectiontaskOkontime;
          this.task2.inspectiontaskOkuntime = this.task.inspectiontaskOkuntime;
          this.task2.code = this.task.taskCoding;
        }
        this.task2.spotcheckCode=this.task.code1;

        const year = new Date(this.value1).getFullYear();
        const month = new Date(this.value1).getMonth() + 1;
        const day = new Date(this.value1).getDate();
        const hour = new Date(this.value1).getHours();
        const minute = new Date(this.value1).getMinutes();
        const sencond = new Date(this.value1).getSeconds();
        console.log("时间：" + year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + sencond);
        const date1 = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + sencond;
        const year1 = new Date(this.value2).getFullYear();
        const month1 = new Date(this.value2).getMonth() + 1;
        const day1 = new Date(this.value2).getDate();
        const hour1 = new Date(this.value2).getHours();
        const minute1 = new Date(this.value2).getMinutes();
        const sencond1 = new Date(this.value2).getSeconds();
        console.log("时间：" + year1 + "-" + month1 + "-" + day1 + " " + hour1 + ":" + minute1 + ":" + sencond1);
        const date2 = year1 + "-" + month1 + "-" + day1 + " " + hour1 + ":" + minute1 + ":" + sencond1;
        this.task2.inspectiontaskOkontime = date1;
        this.task2.inspectiontaskOkuntime = date2;
        console.log(this.task2);
        adjustTask(this.task2).then((res) => {
          this.dialogVisible = false;

          if (res.data == "修改成功") {
            this.$message.success("调整成功");
            this.init();
          } else {
            this.$message.error("调整失败");
          }

        }).catch((err) => {


        });



      }
    }, change() {
      this.UpdateTime = "";
      this.value1 = "";
      this.value2 = "";
      this.task2.cause = "";
      this.task2={};
    },
  }
};
</script>

<style>
.btn-group {
  margin-bottom: 20px;
  gap: 10px;
}

.table {
  margin-top: 20px;
}
</style>
